/**
 * 组列表单项占位
 */
import React from 'react';
import Skeleton from 'react-loading-skeleton';
import { YunxiaoIcon } from '@alife/devops-ui';
import withTimeoutSkeleton from './index';
import './index.scss';

export class ListSkeleton extends React.PureComponent {
  render() {
    const { inGroup } = this.props;
    // 组内显示4个，防止出现滚动条
    const arr = inGroup ? [1, 2, 3, 4] : [1, 2, 3, 4, 5];

    return (
      <div className="at-list">
        {arr.map((item) => {
          return (
            <div className="skeleton-list-item org-group" key={item}>
              <div className="skeleton-list-item-img skeleton-wapper">
                <span className={'code-group-skeleton-btn ml32'}>
                  <YunxiaoIcon type="folder-line" />
                </span>
                <Skeleton width={36} height={36} />
              </div>
              <div className="skeleton-list-item-body">
                <div className="skeleton-list-item-left">
                  <div className="skeleton-list-item-left-title skeleton-wapper">
                    <Skeleton width={150} height={20} />
                  </div>
                  <div className="skeleton-list-item-left-desc skeleton-wapper">
                    <Skeleton width={300} height={20} />
                  </div>
                </div>
                <div className="skeleton-list-item-center skeleton-wapper">
                  <Skeleton width={120} height={20} />
                </div>
                <div className="skeleton-list-item-right skeleton-wapper">
                  <Skeleton width={64} height={24} />
                </div>
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}

export default withTimeoutSkeleton(ListSkeleton);
